<template>
  <div>
    <el-dialog
      :class="'el-dialog-theme3'"
      v-model="taskJcxmOpen"
      width="95%"
      title="已选中的检测项目列表（不分包）"
      top="1vh"
      draggable
      :close-on-click-modal="false"
      align-center
    >
      <el-row>
        <el-col :span="2">
          <p class="pinformation" style="margin-top: 9px">共{{ taskJcxmTotal }}条数据</p>
        </el-col>
        <el-col :span="4" style="padding-top: 7px">
          <el-button
            type="danger"
            link
            icon="Delete"
            @click="handleOpenDelete"
            :disabled="checkOpenId.length == 0"
            >删除</el-button
          >
          <el-button
            type="danger"
            link
            icon="Delete"
            @click="handleOpenAllDelete"
            :disabled="taskJcxmList.length == 0"
            >全部删除</el-button
          >
        </el-col>
        <el-col :span="18">
          <el-row justify="end">
            <el-input
              placeholder="请输入检测项目、方法编号、方法名称进行检索"
              clearable
              v-model="queryTaskJcxmForm.remark"
              prefix-icon="Search"
              style="width: 350px"
              @input="handleQuery"
            />
            <el-input
              placeholder="请填写标准编号、名称"
              clearable
              v-model="pjName"
              prefix-icon="Edit"
              style="width: 350px; margin-left: 10px"
            />
            <el-button type="success" style="margin-left: 10px" @click="handleSavePointPj"
              >批量添加</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <el-table
        style="margin-top: 1vh"
        :data="taskJcxmList"
        @selection-change="handleOpenSelectionChange"
        :height="heightParams"
        border
      >
        <el-table-column type="selection" align="left" />
        <el-table-column label="序号" align="center" width="55">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检测类别" align="center" prop="jclbName" width="100" show-overflow-tooltip/>
        <el-table-column label="检测项目" align="center" prop="jcxmName" width="100" show-overflow-tooltip>
          <template #default="scope">
            <span v-html="transformation(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
        <el-table-column label="方法编号" align="center" prop="methodCode" width="140" show-overflow-tooltip> 
          <template #default="scope">
            <span v-if="!scope.row.bs">{{ scope.row.methodCode }}</span>
            <el-select
              v-else
              style="width: 100%"
              v-model="scope.row.mJId"
              @change="methodCodeChange(scope)"
              @click="methodCodeClick(scope)"
              filterable
            >
              <el-option
                v-for="dict in methodCodeList"
                :key="dict.mJId"
                :label="dict.methodCode"
                :value="dict.mJId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="方法名称" align="center" prop="methodName" show-overflow-tooltip/>
        <el-table-column
          label="检测项目组别"
          align="center"
          width="110"
          prop="groupName"
          show-overflow-tooltip
        />
        <el-table-column label="是否求和" align="center" width="85">
          <template #default="scope">
            <span v-if="scope.row.isSum == 0">否</span>
            <span v-if="scope.row.isSum == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column label="采样天数" align="center" width="90" prop="">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.bs"
              v-model="scope.row.sampleDay"
              style="width: 100%"
              controls-position="right"
              :min="1"
            >
            </el-input-number>
            <span v-else>{{ scope.row.sampleDay }}</span>
          </template>
        </el-table-column>
        <el-table-column label="每天频次" align="center" width="90" prop="">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.bs"
              v-model="scope.row.sampleCount"
              style="width: 100%"
              controls-position="right"
              :min="1"
            >
            </el-input-number>
            <span v-else>{{ scope.row.sampleCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价标准" align="center" width="160" show-overflow-tooltip>
          <template #default="scope">
            <el-input
              v-model="scope.row.pjName" maxlength="100" 
              @blur="scope.row.pjName = $event.target.value"
              @change="
                noPackageSaveBtnClick({
                  cJId: scope.row.cJId,
                  pjName: scope.row.pjName,
                })
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="上限" align="center" width="110" prop="">
          <template #default="scope">
            <el-input
              v-model="scope.row.maxValue" maxlength="20" 
              @blur="scope.row.maxValue = $event.target.value"
              @change="
                noPackageSaveBtnClick({
                  cJId: scope.row.cJId,
                  maxValue: scope.row.maxValue,
                })
              "
            />
            <!-- <span v-else>{{ scope.row.maxValue }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="下限" align="center" width="110" prop="">
          <template #default="scope">
            <el-input
              v-model="scope.row.minValue" maxlength="20" 
              @blur="scope.row.minValue = $event.target.value"
              @change="
                noPackageSaveBtnClick({
                  cJId: scope.row.cJId,
                  minValue: scope.row.minValue,
                })
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="指定方法" align="center" width="85">
          <template #default="scope">
            <span v-if="scope.row.isMethod == 0">否</span>
            <span v-if="scope.row.isMethod == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="145"
        >
          <template #default="scope">
            <el-button
              link
              type="success"
              icon="Edit"
              v-if="!scope.row.bs"
              @click="noPackageEditBtnClick(scope)"
              >编辑</el-button
            >
            <el-button
              link
              type="success"
              v-else
              @click="
                noPackageSaveBtnClick(
                  {
                    cJId: scope.row.cJId,
                    sampleDay: scope.row.sampleDay,
                    sampleCount: scope.row.sampleCount,
                    mJId: scope.row.mJId
                  },
                  scope.$index
                )
              "
            >
              <svg-icon icon-class="save" style="width: 14px; height: 14px" />
              <span style="margin-left: 6px">保存</span>
            </el-button>
            <el-button
              link
              type="success"
              icon="Delete"
              @click="handleOpenDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="taskJcxmTotal"
        :total="taskJcxmTotal"
        v-model:page="queryTaskJcxmForm.pageNum"
        v-model:limit="queryTaskJcxmForm.pageSize"
        @pagination="getTakJcxmList"
        style="margin-top: 10px !important; margin-right: 5vw"
      />
    </el-dialog>
    <el-dialog
      :class="'el-dialog-theme3'"
      v-model="taskJcxmPackageOpen"
      width="90%"
      title="已选中的检测项目列表（分包）"
      top="1vh"
      draggable
      :close-on-click-modal="false"
      align-center
    >
      <el-row>
        <el-col :span="2">
          <p class="pinformation" style="margin-top: 9px">共{{ taskJcxmTotal }}条数据</p>
        </el-col>
        <el-col :span="4" style="padding-top: 7px">
          <el-button
            type="danger"
            link
            icon="Delete"
            @click="handleOpenDelete"
            :disabled="checkOpenId.length == 0"
            >删除</el-button
          >
          <el-button
            type="danger"
            link
            icon="Delete"
            @click="handleOpenAllDelete"
            :disabled="taskJcxmList.length == 0"
            >全部删除</el-button
          >
        </el-col>
        <el-col :span="18">
          <el-row justify="end">
            <el-input
              placeholder="请输入检测项目、方法编号、方法名称"
              clearable
              v-model="queryTaskJcxmForm.remark"
              prefix-icon="Search"
              style="width: 350px"
              @input="handleQuery"
            />
            <el-input
              placeholder="请填写标准编号、名称"
              clearable
              v-model="pjName"
              prefix-icon="Edit"
              style="width: 350px; margin-left: 10px"
            />
            <el-button type="success" style="margin-left: 10px" @click="handleSavePointPj"
              >保存</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <el-table
        style="margin-top: 2vh"
        :data="taskJcxmList"
        @selection-change="handleOpenSelectionChange"
        :height="heightParams"
      >
        <el-table-column type="selection" align="left" />
        <el-table-column label="序号" align="center" width="55">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检测类别" align="center" prop="jclbName" width="120" />
        <el-table-column label="检测项目" align="center" prop="jcxmName" width="120">
          <template #default="scope">
            <span v-html="transformation(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
        <el-table-column label="方法编号" align="center" prop="methodCode" width="140">
          <template #default="scope">
            <span v-if="!scope.row.bs">{{ scope.row.methodCode }}</span>
            <el-select
              v-else
              style="width: 100%"
              v-model="scope.row.mJId"
              @change="methodCodeChange(scope)"
              @click="methodCodeClick(scope)"
              filterable
            >
              <el-option
                v-for="dict in methodCodeList"
                :key="dict.mJId"
                :label="dict.methodCode"
                :value="dict.mJId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="方法名称" align="center" prop="methodName" width="400" show-overflow-tooltip/>
        <el-table-column
          label="检测项目组别"
          align="center"
          width="140"
          prop="groupName"
        />
        <el-table-column label="是否采样" align="center" width="90">
          <template #default="scope">
            <span v-if="scope.row.isPackage == 1">是</span>
            <span v-if="scope.row.isPackage == 2">否</span>
          </template>
        </el-table-column>
        <el-table-column label="是否求和" align="center" width="90">
          <template #default="scope">
            <span v-if="scope.row.isSum == 0">否</span>
            <span v-if="scope.row.isSum == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column label="采样天数" align="center" width="120" prop="">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.bs"
              v-model="scope.row.sampleDay"
              style="width: 80%"
              controls-position="right"
            >
            </el-input-number>
            <span v-else>{{ scope.row.sampleDay }}</span>
          </template>
        </el-table-column>
        <el-table-column label="每天频次" align="center" width="120" prop="">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.bs"
              v-model="scope.row.sampleCount"
              style="width: 80%"
              controls-position="right"
              :min="1"
            >
            </el-input-number>
            <span v-else>{{ scope.row.sampleCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价标准" align="center" width="160" show-overflow-tooltip>
          <template #default="scope">
            <el-input
              v-model="scope.row.pjName" maxlength="100" 
              @blur="scope.row.pjName = $event.target.value"
              @change="
                noPackageSaveBtnClick({
                  cJId: scope.row.cJId,
                  pjName: scope.row.pjName,
                })
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="上限" align="center" width="110" prop="">
          <template #default="scope">
            <el-input
              v-model="scope.row.maxValue" maxlength="20" 
              @blur="scope.row.maxValue = $event.target.value"
              @change="
                noPackageSaveBtnClick({
                  cJId: scope.row.cJId,
                  maxValue: scope.row.maxValue,
                })
              "
            />
            <!-- <span v-else>{{ scope.row.maxValue }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="下限" align="center" width="110" prop="">
          <template #default="scope">
            <el-input
              v-model="scope.row.minValue" maxlength="20" 
              @blur="scope.row.minValue = $event.target.value"
              @change="
                noPackageSaveBtnClick({
                  cJId: scope.row.cJId,
                  minValue: scope.row.minValue,
                })
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="分包公司" align="center" prop="packageName" width="150" show-overflow-tooltip/>
        <el-table-column label="指定方法" align="center" width="90">
          <template #default="scope">
            <span v-if="scope.row.isMethod == 0">否</span>
            <span v-if="scope.row.isMethod == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="success"
              icon="Edit"
              v-if="!scope.row.bs"
              @click="noPackageEditBtnClick(scope)"
              >编辑</el-button
            >
            <el-button
              link
              type="success"
              v-else
              @click="
                noPackageSaveBtnClick(
                  {
                    cJId: scope.row.cJId,
                    sampleDay: scope.row.sampleDay,
                    sampleCount: scope.row.sampleCount,
                  },
                  scope.$index
                )
              "
            >
              <svg-icon icon-class="save" style="width: 14px; height: 14px" /><span
                style="margin-left: 6px"
                >保存</span
              ></el-button
            >
            <el-button
              link
              type="success"
              icon="Delete"
              @click="handleOpenDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="taskJcxmTotal"
        :total="taskJcxmTotal"
        v-model:page="queryTaskJcxmForm.pageNum"
        v-model:limit="queryTaskJcxmForm.pageSize"
        @pagination="getTakJcxmList"
        style="margin-top: 10px !important; margin-right: 5vw"
      />
    </el-dialog>
  </div>
</template>
<script setup>
import {
  listTaskJcxm,
  deleteSelectedJcxm,
  deleteSelectedAllJcxm,
  getMethodCodeList,
  saveJcxmCypcOrValue,
  updateJcxmPj,
} from "@/api/contract/taskPoint";
const { proxy } = getCurrentInstance();
const { lims_jcxm_group } = proxy.useShareDict("lims_jcxm_group");
const taskJcxmOpen = ref(false);
const taskJcxmPackageOpen = ref(false);
const taskJcxmList = ref([]);
const taskJcxmTotal = ref(0);
const checkOpenId = ref([]);
const pjName = ref();
const queryTaskJcxmForm = ref({
  pageNum: 1,
  pageSize: 10,
});
const props = defineProps({
  params: {
    type: Object,
  },
});
// 显示弹框
function show(openName, bs) {
  eval(openName + ".value=true");
  queryTaskJcxmForm.value = {
    pageNum: 1,
    pageSize: 10,
  };
  if (bs) {
    Object.assign(queryTaskJcxmForm.value, props.params);
    getTakJcxmList();
  } else {
    taskJcxmList.value = [];
    taskJcxmTotal.value = 0;
  }
}
function handleQuery() {
  queryTaskJcxmForm.value.pageNum = 1;
  getTakJcxmList();
}
// 点击分页或查询
function getTakJcxmList() {
  listTaskJcxm(queryTaskJcxmForm.value).then((res) => {
    taskJcxmList.value = res.rows;
    taskJcxmTotal.value = res.total;
  });
}

function handleOpenSelectionChange(selection) {
  checkOpenId.value = selection;
}
const emit = defineEmits(["setJcxmCount"]);

// open 删除
function handleOpenDelete(row) {
  if (!row && checkOpenId.value.length == 0) {
    proxy.$modal.msgError("请先选择要删除的检测项目");
  } else {
    proxy.$modal
      .confirm(row ? "是否确认删除该数据项？" : "是否确认删除选中的数据项？")
      .then(function () {
        let cJIds = row.cJId || checkOpenId.value.map((item) => item.cJId);
        deleteSelectedJcxm(queryTaskJcxmForm.value.pointId, cJIds).then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          let data = {
            jcxmCount: res.data.jcxmCount,
            jcxmPCount: res.data.jcxmPCount,
          };
          emit("setJcxmCount", data);
          getTakJcxmList();
        });
      });
  }
}

// open全部删除
function handleOpenAllDelete() {
  proxy.$modal.confirm("是否确认删除全部数据项?").then(function () {
    deleteSelectedAllJcxm({
      pointId: queryTaskJcxmForm.value.pointId,
      isPackage: queryTaskJcxmForm.value.isPackage,
    }).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      let data = {
        jcxmCount: res.data.jcxmCount,
        jcxmPCount: res.data.jcxmPCount,
      };
      emit("setJcxmCount", data);
      getTakJcxmList();
    });
  });
}

const heightParams = ref("60vh");
watch(
  () => taskJcxmTotal.value,
  () => {
    if (taskJcxmTotal.value) {
      heightParams.value = "60vh";
    } else {
      heightParams.value = "65.5vh";
    }
  }
);

function transformation(row) {
  if (row) {
    const a = proxy.getSupAndSub(row);
    return a;
  }
}

const methodCodeList = ref([]);

function noPackageEditBtnClick(scope) {
  taskJcxmList.value[scope.$index].bs = 1;
  getMethodCodeList(scope.row.mJId).then((res) => {
    methodCodeList.value = res.data;
  });
}

function noPackageSaveBtnClick(row, index) {
  saveJcxmCypcOrValue(row).then((res) => {
    proxy.$modal.msgSuccess("保存成功");
    taskJcxmList.value[index].bs = 0;
  });
}

function methodCodeChange(scope) {
  const selectedMethod =  proxy.getItemObjectByArray(
    methodCodeList.value,
    "mJId",
    scope.row.mJId
  );
  taskJcxmList.value[scope.$index].methodCode = selectedMethod.methodCode;
  taskJcxmList.value[scope.$index].methodName = selectedMethod.methodName;
  taskJcxmList.value[scope.$index].methodId = selectedMethod.methodId;

}

function methodCodeClick(scope) {
  getMethodCodeList(scope.row.mJId).then((res) => {
    methodCodeList.value = res.data;
  });
}

function handleSavePointPj() {
  if (!pjName.value) {
    proxy.$modal.msgError("请输入标准编号、名称！");
    return;
  }
  const data = { pointId: queryTaskJcxmForm.value.pointId, pjName: pjName.value,isPackage:queryTaskJcxmForm.value.isPackage };
  updateJcxmPj(data).then((res) => {
    proxy.$modal.msgSuccess("添加成功");
    getTakJcxmList();
  });
}

// 对外暴露以下方法或变量
defineExpose({
  show,
});
</script>
